<script setup>
    import {reactive,ref,onBeforeMount,getCurrentInstance} from "vue"
	
import NavigationVue from '../../components/Navigation.vue';
import buxian from "./img/buxian.png"
import buxian1 from "./img/buxian1.png"
import jiaoche from "./img/jiaoche.png"
import jiaoche1 from "./img/jiaoche1.png"
import shangwuche from "./img/shangwuche.png"
import shangwuche1 from "./img/shangwuche1.png"
import yueye from "./img/yueye.png"
import yueye1 from "./img/yueye1.png"
import daba from "./img/daba.png"
import daba1 from "./img/daba1.png"
import paoche from "./img/paoche.png"
import paoche1 from "./img/paoche1.png"
import haoche from "./img/haoche.png"
import haoche1 from "./img/haoche1.png"
import hunche from "./img/hunche.png"
import hunche1 from "./img/hunche1.png"
import fangche from "./img/fangche.png"
import fangche1 from "./img/fangche1.png"
// 路由传参需要
import { useRoute } from 'vue-router';
    import { onMounted } from 'vue';
let text = reactive([
    { p: "不限", url: buxian, url1: buxian1,url2: buxian1,yanf1:"carBiao1",yanf2:"carBiao",yanf3:"carBiao" },
    { p: "轿车", url: jiaoche, url1: jiaoche1, url2: jiaoche1,yanf1:"carBiao1",yanf2:"carBiao",yanf3:"carBiao" },
    { p: "商务车", url: shangwuche, url1: shangwuche1, url2: shangwuche1,yanf1:"carBiao1",yanf2:"carBiao",yanf3:"carBiao" },
    { p: "越野车", url: yueye, url1: yueye1,url2: yueye1,yanf1:"carBiao1",yanf2:"carBiao",yanf3:"carBiao" },
    { p: "大巴车", url: daba, url1: daba1 , url2: daba1,yanf1:"carBiao1",yanf2:"carBiao",yanf3:"carBiao"},
    { p: "跑车", url: paoche, url1: paoche1, url2: paoche1,yanf1:"carBiao1",yanf2:"carBiao",yanf3:"carBiao" },
    { p: "豪车", url: haoche, url1: haoche1 , url2: haoche1,yanf1:"carBiao1",yanf2:"carBiao",yanf3:"carBiao" },
    { p: "婚车", url: hunche, url1: hunche1, url2: hunche1 ,yanf1:"carBiao1",yanf2:"carBiao",yanf3:"carBiao"  },
    { p: "房车", url: fangche, url1: fangche1 , url2: fangche1,yanf1:"carBiao1",yanf2:"carBiao",yanf3:"carBiao" },
])
let price =reactive( [
    { text: "全部" ,},
    { text: "199以下" },
    { text: "200-499" },
    { text: "500-999" },
    { text: "1000-1999" },
    { text: "2000以上" },
])

// 路由传参
const route = useRoute();
    onMounted(() => {
        // console.log(route.query.id); 
        console.log(text[route.query.id].url);
        
        text[route.query.id].url1=text[route.query.id].url
        text[route.query.id].yanf2=text[route.query.id].yanf1
    })

// 排他
function change(index){
for(let i=0;i<text.length;i++){
    text[i].url1=text[i].url2
    text[i].yanf2=text[i].yanf3
if(i==index){
    text[i].url1=text[i].url
    text[i].yanf2=text[i].yanf1
    // console.log( text[i].url1,text[i].url);
}else{
    text[index].url1=text[index].url1
    text[index].yanf2=text[index].yanf2

}
    
}
}

function getInfo(e,index,value){
console.log(value,index);
}

// 后端数据

 
	let arr1=reactive([]) //和vue2一样，请求数据时需要提前用一个空数组装
 
	const {proxy} = getCurrentInstance(); //正常使用:语法糖环境默认为setup钩子
  
  	 onBeforeMount( async()=>{
  	 	let res=await proxy.$axios('/sousuocar') //使用公共配置的$axios进行axios请求
  	 	//因为公共路径的配置所以多了一个api1，实际请求的网址为http://127.0.0.1:5137/api1/test
  	 	//此时会进行代理 转变为http://127.0.0.1:7001/test
  	 	 arr1.push(...res.data) //将请求的数据添加到外部的arr1中
		 // console.log(arr1,6666)	
		 
		 //处理图片路径问题
		 let VehicleCarArry=[]
		 let aa=[]
		 let bb=[]
		arr1.forEach((el,index)=>{
				VehicleCarArry[index]=el.VehicleCar.split("---")
				aa[index]=VehicleCarArry[index].join('http://localhost:7001')
				bb[index]=aa[index].split(",")
			    el.img=bb[index]
				

		})
		// arr1.push
			// console.log(VehicleCarArry,1111,aa,222,bb)
			// console.log(arr1,6666)
  	 })
</script>
<template >
    <NavigationVue></NavigationVue>
    <!-- 车型分类的大盒子 -->
    <div class="box">
        <div class="chexin">车型</div>
        <div :class="item.yanf2" v-for="(item,index) in text" :key="index" @click="change(index)"><img :src="item.url1" alt=""  />
            <p>{{item.p}}</p>
        </div>
    </div>
    <div class="pricebox">
        <div class="price">价格</div>
        <div class="pricebtn">
            <div v-for="(item,index) in price" :key="index" class="inputbox"><input type="radio" name="price" :value="item.text" @click="getInfo($event,index,item.text)">{{item.text}}</div>
        </div>
    </div>
	<div class="carlists">
	  <div class="carlist" v-for="el in arr1">
	    <router-link :to="{path:'/yj/detail',query:{'id':el.carid}}">
	      <img :src="el.img[0]" alt="" />
	   </router-link>
	    <div class="type1">{{el.carname}}</div>
	    <div class="type2">{{el.shift}}&nbsp;|&nbsp;乘坐{{el.peopel}}人</div>
	    <div class="type3">￥<span>{{el.price}}</span>元起</div>
	  </div>
	</div>
	
	<Footer1></Footer1>
</template>
<style scoped lang="scss">

// 车型分类的大盒子
.box {
    width: 1130px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    margin-top: 20px;
// 车型样式
    .chexin {
        width: 70px;
        height: 70;
        text-align: center;
        height: 70px;
        line-height: 70px;

    }
// 几个车盒子
    .carBiao {
        width: 110px;
        box-sizing: border-box;
        text-align: center;
        height: 80px;
        padding: 10px 0;
        margin-right: 10px;
        border: 1px solid #ccc;
    }
    .carBiao1{
        width: 110px; 
        box-sizing: border-box;
        text-align: center;
        height: 80px;
        padding: 10px 0;
        margin-right: 10px;
        border: 1px solid rgb(219, 37, 52);
        border: 2px solid rgb(219, 37, 52)
    }
    .carBiao:hover{
        border: 2px solid rgb(219, 37, 52);
    }
}
// 价格总盒子
// .pricebox{
//     width: 1100px;
//     margin: 0 auto;
//     display: flex;
//     margin-top: 20px;
    
// }
.pricebox {
    width: 1100px;
    margin: 0 auto;
    display: flex;
    margin-top: 5px;
    height: 32px;
    padding: 14px 0;

    .price {
        width: 60px;
        line-height: 32px;
    }
   .pricebtn{
    display:flex;
   }
    .inputbox {
        width: 110px;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        color: rgb(102, 102, 102);
    }
}
p{
    font-size: 14px;
    color: rgb(102, 102, 102);
    margin-top: 5px;
}

//车表
.carlists {
  background-color: #fafafa;
  cursor: default;
  width: 1300px;
  // height: 2000px;
  margin: 0 auto;
  // background-color: #3ac257;
  flex-wrap: wrap;
  display: flex;
  // justify-content: space-between;

  .carlist:hover {
    box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); /* 鼠标悬浮时盒子出现的阴影 */
    transform: translate(0, -5px); /* 鼠标悬浮时盒子上移10px */
  }
  //单个车box
  .carlist {
    width: 378px;
    // background-color: aliceblue;
    margin-bottom: 20px;
	margin-left: 40px;
    position: relative;
    border: 1px solid #d5d2d2;
    transition: all 0.3s; /* 上浮这个过程需要的时间 */
    a {
      //车img
      img {
        cursor: pointer;
        width: 378px;
        height: 258px;
      }
    } //车辆型号
    .type1 {
      margin-left: 10px;
      margin: 5px;
      font-size: 18px;
    }
    .type2 {
      margin-left: 10px;
      font-size: 14px;
    }
    .type3 {
		width:130px;
      position: absolute;
      top: 280px;
      left: 260px;
      span {
        color: #ff3e1d;
        font-size: 24px;
      }
    }
  }
}
</style>